<template name="articleItem">
	<view class="article_item">
		<!-- 头部 -->
		<articleHeader class="width100" :avatar_url="item.author.avatar_url" :nickname="item.author.nickname" @removeSlef="removeSlef">

		</articleHeader>
		<!-- 内容 -->
		<view class="item_content">
			<view class="article_title" @click="go_details(item)">{{ item.content }}</view>
			<view v-if="item.files[0]" class="article_IV">
				<!-- 图片OR视频 and 九宫格 -->
				<singleMedia class="width100" v-if="item.files.length < 2" :isImage="(item.files[0].file_type === 0)" :file="item.files[0]"
				 maxWidth="450" @playVideo.stop="playVideo" />
				<mediaScratchableLatex class="width100" v-else :files="item.files" :margin="[5, 99.8]" />
			</view>
		</view>
		<view class="good_comment">
			<view class="good_comment_title">

			</view>
		</view>
		<view class="item_topic">
			<!-- 文章话题 -->
		</view>
		<articleActionUseIndex class="width100" :item="item" @click_like="articleLike" :index="index" />
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/DebouchAndThrottl.js';
	import articleHeader from './articleHeader.vue';
	import mediaScratchableLatex from '../mediaComponents/mediaScratchableLatex.vue';
	import singleMedia from '../mediaComponents/singleMedia.vue';
	import articleActionUseIndex from './articleActionUseIndex.vue';
	export default {
		name: 'articleItem',
		props: ['item', 'index', 'action', 'go'],
		components: {
			articleHeader,
			mediaScratchableLatex,
			singleMedia,
			articleActionUseIndex
		},
		data() {
			return {};
		},
		methods: {
			isImage(file) {
				return file.file_type === 0;
			},
			articleLike(aid) {
				this.$emit('articleLike', aid, this.index);
			},
			removeSlef() {
				this.$emit('removeSlef', this.index);
			},
			playVideo(videoContext) {
				this.$emit('playVideo', videoContext);
			},
			go_details: throttle(function(item) {
				if (this.go) {
					uni.navigateTo({
						url: '../../pages/index/articleDetails?data=' + encodeURIComponent(JSON.stringify(item))
					});
				}
			}, 1000)
		}
	};
</script>

<style lang="scss" scoped>
	.article_item {
		background-color: white;
		width: calc(100% - 40rpx);
		flex-shrink: 0;
		flex-wrap: wrap;
		padding: 0 20rpx;
		margin: 5rpx 0;
	}

	.item_content {
		width: 100%;
		align-items: center;
		flex-wrap: wrap;

		.article_title {
			width: 100%;
			margin-bottom: 20rpx;
		}

		.article_IV {
			width: 100%;
			align-items: center;
			flex-wrap: wrap;
		}
	}

	.good_comment {
		width: 100%;
		height: 100rpx;
		background-color: #F5F5F7;
		margin-top: 20rpx;
	}
</style>
